<template>
  <div class="jyBox">
    <van-form @submit="onSubmit" class="margin-top-12" :show-error-message="false">
      <van-field
        v-model="formParams.roomName"
        label="场所名称"
        type="textarea"
        name="roomName"
        placeholder="请输入场所名称"
      />
      <van-field
        v-model="formParams.placeName"
        label="房源名称"
        type="textarea"
        name="placeName"
        placeholder="请输入房源名称"
      />
      <van-field
        v-model="formParams.eventContent"
        rows="3"
        autosize
        label="意见建议"
        type="textarea"
        placeholder="欢迎您入住“普陀山·居”网约房。我们期待您的入住体验，并诚挚希望您能提供宝贵的评价和建议。谢谢。"
        name="eventContent"
        :rules="[{ required: true, message: '请输入意见建议' }]"
        required
      />
      <van-field
        v-model="formParams.feedbackPerson"
        label="姓名"
        type="textarea"
        name="feedbackPerson"
        placeholder="请输入姓名"
      />
      <van-field
        v-model="formParams.feedbackPhone"
        label="联系方式"
        type="textarea"
        name="feedbackPhone"
        placeholder="请输入联系方式"
      />
      <van-field name="uploader" label="附件">
        <template #input>
          <van-uploader v-model="fileList" :after-read="afterRead" />
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { upload } from '@/api/common';
import { eventNoLoginAdd } from '@/api/info';
export default {
  name: 'jy',
  data() {
    return {
      formParams: {
        roomName: '',
        placeName: '',
        eventContent: '',
        feedbackPerson: '',
        feedbackPhone: ''
      },
      fileList: [],
      fileListHt: [], // 后台返回数据显示
      fjBackList: [],
      fyInfo: {}, // 房间信息
    }
  },
  created() {
  },
  methods: {
    afterRead(fileObj) {
      console.log(fileObj);
      // 此时可以自行将文件上传至服务器
      this.fileListHt.push(fileObj.file)
    },
    async onSubmit(values) {
      // await this.uploadImage();
      console.log('submit', values);
      if(values) {
        let params = values;
        params.fileList = this.fjBackList;
        // console.log(params);
        await eventNoLoginAdd(params).then(res => {
          try {
            if(res.code == 200) {
              this.$notify({ type: 'success', message: '提交成功！' });
              this.initParams(); // 清空数据
            }
          } catch(error) {
            console.log(error)
          }
        })
      }
    },
    async uploadImage() {
      if(this.fileList.length > 0) {
        let formData = new FormData();
        for(let i= 0; i< this.fileListHt.length; i++) {
          formData.append('file', this.fileListHt[i]);
          await upload(formData).then(res => {
            try {
              // console.log(res)
              this.fjBackList.push({
                filename: res.fileName,
                newfilename: res.newFileName,
                originalfilename: res.originalFilename,
                url: res.url,
              })
            } catch(error) {
              console.log(error)
            }
          })
        }
      }
    },
    initParams() {
      this.formParams =  {
        roomName: '',
        placeName: '',
        eventContent: '',
        feedbackPerson: '',
        feedbackPhone: ''
      }
      this.fileList = [],
      this.fileListHt = [], // 后台返回数据显示
      this.fjBackList = []
    }
  }
}
</script>

<style lang="less" scoped>
.jyBox {
  font-size: 12px;
  background: #F5F5F5;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  .margin-top-12 {
    margin-top: 12px;
  }
  .titleLeft {
    color: #333333;
    letter-spacing: 0px;
    text-align: left;
  }

}
</style>